<template>
  <div class="container">
    <el-row type="flex" class="row-bg" justify="space-between" align="middle">
      <el-col :span="6">
        <h1>门诊消费记录</h1>
      </el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button type="danger" @click="deleteList">删除</el-button>
        <el-button type="primary" @click="openAdminDialog('')">新增角色</el-button>
        <el-button type="primary" @click="jump">跳转</el-button>
      </el-col>
    </el-row>

    <el-card class="box-card">
      <el-row type="flex" align="middle" :gutter="20" style="margin-bottom: 50px;">
        <el-col :span="6">
          <el-date-picker
            v-model="value1"
            lang="cn"
            style="width: 100%"
            format="yyyy-MM-DD HH:mm:ss"
            type="datetimerange"
            start-placeholder="请选择日期"
            end-placeholder="请选择日期"
          />
        </el-col>
        <el-col :span="6">
          <el-select v-model="val" placeholder="请选择科室" style="width: 100%;">
            <el-option v-for="(item,index) in departmentsdata" :label="item['label']" :value="item['value']" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-input v-model="searchVal" placeholder="请输入病人姓名/就诊卡号" />
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="searchList">搜索</el-button>
        </el-col>
      </el-row>

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" prop="operationTime" label="操作时间" />
        <el-table-column align="center" prop="ordernumber" label="订单号" />
        <el-table-column align="center" prop="name" label="患者姓名" />
        <el-table-column align="center" prop="medicalRecordNumber" label="就诊卡号" />
        <el-table-column align="center" prop="source" label="来源" />
        <el-table-column align="center" prop="businessType" label="业务类型" />
        <el-table-column align="center" prop="expenseType" label="费用类型" />
        <el-table-column align="center" prop="paymentMethod" label="支付方式" />
        <el-table-column align="center" prop="paymentAmount" label="支付金额" />
        <el-table-column align="center" prop="message" label="缴费状态" />

        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="detailpage(scope.row.id)"><i class="el-icon-s-order" style="font-size: 20px;margin-right: 20px;" /></el-button>
            <!--            <el-button type="text" style="color: blue;" @click="DeleteItem(scope.row.id)"><i class="el-icon-delete" style="font-size: 20px;"></i>-->
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" align="middle" style="margin-top: 20px;">
        <el-col :span="24" style="text-align: right;">
          <el-pagination
            :current-page="listQuery.pageNum"
            :page-sizes="[10, 20, 30]"
            :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listQuery.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>

      <!-- 新增、修改弹框 -->
      <el-dialog
        :visible.sync="dialogVisible"
        title="编辑角色信息"
        width="1000"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        style="padding: 40px"
      >
        <el-form ref="ruleForm" label-width="80px" :model="roleFormData" :rules="rules">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="roleFormData.name" type="text" placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="角色描述" prop="message">
            <el-input v-model="roleFormData.message" placeholder="请输入角色描述" />
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="roleFormData.status" active-value="1" inactive-value="0" />
          </el-form-item>
        </el-form>

        <div class="roleSetBox">
          <h3>权限设置</h3>
          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">医生管理</el-checkbox>
          <div style="margin: 10px 0;" />
          <el-checkbox-group v-model="checkedrole">
            <el-checkbox v-for="item in roleSetOptions" :label="item['val']">{{ item['label'] }}</el-checkbox>
          </el-checkbox-group>
        </div>

        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="SaveUser">保存</el-button>
            <el-button type="danger" @click="handleClose">取消</el-button>
          </div>
        </template>
      </el-dialog>

    </el-card>

  </div>
</template>
<script>
import { validatePhone } from '@/utils/common.js'
import { getRoleList, save, Delete, detail } from '@/api/role'
export default {
  data() {
    return {

      value1: '',

      departmentsdata: [
        { label: '赵宏斌123', value: '1' },
        { label: '赵宏斌', value: '2' }
      ],
      // val:'2',

      searchVal: '', // 搜索框查询
      tableData: [], // 列表数据
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },

      // 弹框参数
      dialogVisible: false,
      roleFormData: {
        id: '',
        name: '',
        message: '',
        status: '1'
      },
      rules: {
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        message: [{ required: true, message: '请输入角色描述', trigger: 'blur' }]
      },
      // 权限设置
      isIndeterminate: false,
      checkAll: false,
      checkedrole: [],
      roleSetOptions: [
        { label: '新增', val: '新增' },
        { label: '删除', val: '删除' },
        { label: '导入', val: '导入' },
        { label: '导出', val: '导出' },
        { label: '编辑', val: '编辑' },
        { label: '批量删除', val: '批量删除' }
      ],
      deleteArr: []// 需要删除列表id集合

    }
  },
  mounted() {
    this.init()
  },
  methods: {

    detailpage(id) {
      this.$router.push({ path: '/orderDetails', query: { id: id }})
    },

    // 初始化
    init() {
      // 获取列表数据
      this.getRoleList()
    },

    // 列表-------更新状态按钮
    switchStatus(item) {
      this.roleFormData = item
      this.save(this.roleFormData)
    },

    // 列表----搜索按钮
    searchList() {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 10
      this.getRoleList()
    },

    // 分页
    handleSizeChange(val) {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = val
      this.searchVal = ''
      this.getRoleList()
      console.log(`每页 ${val} 条`)
    },

    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.listQuery.pageSize = 10
      this.searchVal = ''
      this.getRoleList()
      console.log(`当前页: ${val}`)
    },

    // 列表----多选事件
    handleSelectionChange(e) {
      this.deleteArr = e
    },

    // 列表----删除
    deleteList() {
      if (this.deleteArr.length <= 0) {
        this.$message.warning('请选择需要删除的列表')
        return
      }

      this.deleteFun('')
    },

    // 列表---单个删除
    DeleteItem(id) {
      this.deleteFun(id)
    },

    // 封装删除逻辑
    deleteFun(id) {
      console.log(id)
      const arr = []
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        if (id == '') {
          // 批量删除
          this.deleteArr.forEach(item => {
            arr.push(item['id'])
          })
          this.Delete(arr)
        } else {
          // 单个删除
          arr.push(id)
          this.Delete(arr)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 弹框数据初始化
    initFormData() {
      this.roleFormData.id = ''
      this.roleFormData.name = ''
      this.roleFormData.message = ''
      this.roleFormData.status = '1'

      this.isIndeterminate = false
      this.checkAll = false
      this.checkedrole = []
    },

    // 列表----打开编辑管理员信息弹框按钮事件
    openAdminDialog(id) {
      this.$router.push('/setting/role', { id: id })
      // if(id == ''){
      //   //新增
      //   this.initFormData();
      //    this.dialogVisible = true;
      // } else {
      //   //编辑
      //   this.roleFormData.id = id;
      //   this.detail();
      // }
    },

    // 弹框----权限设置多选事件
    handleCheckAllChange(val) {
      this.isIndeterminate = false
      this.checkedrole = val ? ['新增', '删除', '导入', '导出', '编辑', '批量删除'] : []
    },

    // 弹框----表单参数验证
    ValidFormData() {
      if (!this.roleFormData.name || !this.roleFormData.name.trim()) {
        this.$message.warning('请输入角色名称')
        return false
      }

      if (!this.roleFormData.message || !this.roleFormData.message.trim()) {
        this.$message.warning('请输入描述内容')
        return false
      }

      if (this.checkedrole.length <= 0) {
        this.$message.warning('请选择对应的权限')
        return false
      }

      return true
    },

    // 弹框-----保存按钮
    SaveUser() {
      if (this.ValidFormData()) {
        console.log('保存')
        console.log(this.checkedrole)
        this.roleFormData.permission = this.checkedrole.join(',')
        this.save(this.roleFormData)
      }
    },

    // 弹框----取消按钮
    handleClose() {
      this.dialogVisible = false
      this.initFormData()
      this.$refs['ruleForm'].resetFields()
    },

    // 获取列表数据接口
    getRoleList() {
      const that = this
      const params = {
        name: this.searchVal,
        pageNum: this.listQuery.pageNum,
        pageSize: this.listQuery.pageSize
      }
      getRoleList(params).then(res => {
        const data = res['data']
        that.listQuery.total = data['total']
        that.tableData = data['list']
      })
    },

    // 保存接口
    save(params) {
      const that = this
      save(params).then(res => {
        if (res.code == 2000) {
          that.$message.success('保存成功')
          that.dialogVisible = false
          that.initFormData()
          that.listQuery.pageNum = 1
          that.listQuery.pageSize = 10
          that.searchVal = ''
          that.getRoleList()
        }
      })
    },

    // 批量删除
    Delete(arrIds) {
      const that = this
      const params = {
        arrIds: arrIds
      }
      Delete(params).then(res => {
        if (res.code == 2000) {
          that.$message.success('删除成功')
          that.listQuery.pageNum = 1
          that.listQuery.pageSize = 10
          that.searchVal = ''
          that.getRoleList()
        }
      })
    },

    // 根据id查详情
    detail() {
      const that = this
      detail(this.roleFormData.id).then(res => {
        if (res.code == 2000) {
          const data = res['data']
          that.roleFormData = data
          that.checkedrole = data['permission'].split(',')
          that.dialogVisible = true
        }
      })
    }

  }
}
</script>

<style scoped>

</style>
